<template>
	<view>
		<view class="flex align-center justify-between cell top">
			<view>头像</view>
			<view>
				<button class="tx" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
					<image :src="formData.avatar" mode="" style="width: 100%;height: 100%;" @click="outLogin()"></image>
				</button>
			</view>
		</view>
		<!-- <view class="tips">填入药胜中台登记的电话号码进行认证</view> -->
		<view class="flex align-center justify-between cell">
			<view>手机号码</view>
			<view>
				<input v-model="formData.phone" class="uni-input" placeholder="请填写电话号码" />
			</view>
			<!-- <view class="flex align-center text-right">
				<button  class="btn-css" @click="handleGetCompanyInfoByPhone">
					验证手机号码
				</button>
			</view> -->
		</view>
		<view class="flex align-center justify-between cell">
			<view>手机号码认证</view>
			<view class="flex align-center text-right">
				<view v-if="formData.isShiming==0" class="text-left">未认证</view>
				<view v-if="formData.isShiming==1" class="text-left" style="color:cadetblue;">已认证</view>
			</view>
		
		</view>
		<!-- <view class="flex align-center justify-between cell">
			<view>店铺名称</view>
			<view>
				<input v-model="formData.nikeName" class="uni-input" disabled />
			</view>
		</view>
		<view class="flex align-center justify-between cell">
			<view>店铺编号</view>
			<view>
				<input v-model="formData.companyId" class="uni-input" disabled />
			</view>
		</view> -->
		
		

		<view class="comfirm-css" @click="update">确认</view>
	</view>
</template>

<script>
	import {
		baseUrl,
		header
	} from '@/common/config.js'

	import {
		updateUserInfo,
		getPhoneNumber,
		login,
		getCompanyInfoByPhone
	} from '@/common/api/api.js'


	export default {
		data() {
			return {
				name: '微信用户',
				formData: {
					phone: '',
					avatar: '',
					nikeName: '',
					userInfoId: '',
					companyId:'',
					companyName:'',
				}
			}
		},
		// onUnload() {
		// 	uni.reLaunch({
		// 		url: '/pages/index/index'
		// 	})
		// },
		onLoad() {
			console.log("userinfo", this.$store.state.$userInfo);
			this.formData.userInfoId = this.$store.state.$userInfo.id;
			this.formData.nikeName = this.$store.state.$userInfo.nikeName;
			this.formData.avatar = this.$store.state.$userInfo.avatar;
			this.formData.phone = this.$store.state.$userInfo.phone;
			this.formData.companyId=this.$store.state.$userInfo.companyId;
			this.formData.isShiming=this.$store.state.$userInfo.isShiming;
		},
		methods: {
			handleGetCompanyInfoByPhone(){
				getCompanyInfoByPhone({lianxiPhone:this.formData.phone}).then(res=>{
					this.formData.companyId=res.data.id;
					this.formData.nikeName=res.data.companyName;
				})
			},
			onChooseAvatar(e) {
				const {
					avatarUrl
				} = e.detail
				this.uploadFile(avatarUrl);
			},
			uploadFile(tempFilePaths) {
				uni.uploadFile({
					name: "file",
					url: baseUrl + 'api/userInfo/userUpload',
					header: header,
					formData: {}, //上传额外携带的参数
					filePath: tempFilePaths, //临时路径
					success: (uploadFileRes) => {
						uni.hideLoading();
						const ret = JSON.parse(uploadFileRes.data);
						if (ret.code != 200) {
							uni.$u.toast(res.message);
							return;
						}
						this.formData.avatar = ret.data.url;
					},
				});
			},
			//获取手机号
			getphonenumber(e) {
				console.log(e)
				var that = this
				if (e.detail.errMsg !== "getPhoneNumber:ok") {
					return; // 不允许授权
				}
				that.formData.code = e.detail.code;
				that.formData.openid = that.$store.state.$token
				var params = {
					code: e.detail.code,
					openid: that.$store.state.$token
				}
				getPhoneNumber(params).then(res => {
					that.formData.phone = res.data.phone;
				})
			},
			update() {
				let that = this;
				that.formData.userInfoId = that.$store.state.$token
				updateUserInfo(that.formData).then(res => {
					this.$store.commit('$uStore', {
						name: '$userInfo',
						value: res.data
					});
					uni.$u.toast("用户信息更新成功！");
				})
			}
		}
	}
</script>

<style>
	page {
		background-color: #fff;
	}
</style>
<style lang="scss" scoped>
	.top {
		border-top: 20rpx solid #f1f1f1;
	}

	.cell {
		padding: 20rpx;
		border-bottom: 1px solid #f1f1f1;

		.tx {
			margin: 0 auto;
			width: 50px;
			height: 50px;
			font-size: 0;
			margin-bottom: 10px;
			overflow: hidden;
			border: 1px solid #e0e0ef;
			background-color: #e0e0ef;
			border-radius: 50%;
			padding: 0;
		}

		.uni-input {
			text-align: right;
			height: 80rpx;
		}
	}

	.btn-css {
		background-color: #eee;
		color: #81D8CF;
		padding: 6rpx 20rpx;
		border-radius: 50rpx;
		font-size: 24rpx;
		border: unset;
		width: 200rpx;
		margin: 0;
	}

	button::after {
		border: unset;
	}


	.comfirm-css {
		background-color: #81D8CF;
		color: #fff;
		width: 96%;
		height: 80rpx;
		line-height: 80rpx;
		font-size: 30rpx;
		margin: 0 auto;
		margin-top: 100rpx;
		text-align: center;
		border-radius: 100rpx;
		border: none;
	}

	.tips {
		margin: 20rpx;
		color: #666;
		font-size: 24rpx;
	}

	.text-left {
		margin-left: 20rpx;
	}
</style>